<template>
	<view :class="remarks? 'content':'content_active'">
		<view class="detail">
			<view class="title row">
				<view class="col-3">
					
				</view>
				<view class="col-18 t_center t_size_33">
					行程备注
				</view>
				<view class="col-3 t_right" @click="closeChange">
					<image src="../../static/index/close_icon.png" mode="heightFix"></image>
				</view>
			</view>
			<view class="inform row t_center">
				<block v-for="(item,index) in list" :key="index">
					<view :class="remarks_str.indexOf(item) != -1 ? 'active' : ''" @click="changeIndex(item)">
						{{item}}
					</view>
				</block>
			</view>
			<view class="btn">
				<button type="primary" @click="closeChange">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'select-remarks',
		props:{
			remarks: {
				type: Boolean,
				default:()=>{
					return false
				}
			},
			list: {
				type: Array,
				default:()=>{
					return []
				}
			},
			remarks_str: {
				type: Array,
				default: ()=>{
					return ''
				}
			}
		},
		methods:{
			changeIndex(item){
				this.$emit('changeIndex',item)
			},
			closeChange(){
				this.$emit('closeChange',this.remarks_str)
			}
		}
	}
</script>

<style lang="scss">
	.content,
	.content_active{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.3);
		transition-duration: 0.2s;
		/*     以下三值为默认值，稍后会详细介绍 */
		transition-property: all;
		transition-timing-function: ease;
		transition-delay: 0s;
		.detail{
			width: 100%;
			position: absolute;
			bottom: 0;
			background-color: #FFFFFF;
			border-radius: 30rpx 30rpx 0 0;
			padding-bottom: 25rpx;
			.title{
				width: 92%;
				padding: 0 4%;
				height: 96rpx;
				line-height: 96rpx;
				color: #333333;
				border-bottom: 1px solid #ededed;
				image{
					height: 36rpx;
					margin-top: 30rpx;
				}
			}
			.inform{
				width: 92%;
				padding: 25rpx 4%;
				border-bottom: 1px solid #ededed;
				view{
					width: 30%;
					margin: 0 calc(1.65% - 1px);
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 9rpx;
					color: #B3B3B3;
					border: 1px solid #D9D9D9;
					margin-bottom: 18rpx;
				}
				.active{
					color: #FFFFFF;
					background-color: #6CBF30;
					border-color: #6CBF30;
				}
			}
		}
	}
	.content_active{
		top: 110vh;
	}
	.btn{
		width: 92%;
		padding: 21rpx 4%;
		button{
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 48rpx;
			background-color: #6CBF30;
		}
	}
</style>
